<template>
	<view>

		<view class="topbar-wrapper">
			<view class="topbar-box">
				<view class="topbar-item" :class="{ 'active': ( activeNav==item.nav ) }"
					v-for="(item, index) in topTaps" :key="index" @click="handleChangeNav(item.nav)">{{ item.name }}
				</view>
			</view>
		</view>

		<view class="order-wrapper">
			<view class="order-list">
				<u-list :height="listWrapperH" @scrolltolower="handleLoadMore">
					<u-list-item v-for="(item, index) in orderList" :key="index">
						<view class="order-item">
							<view class="order-item_hd" @click="toOrderDetail(item.order.orderNo)">
								<view class="activity-category">{{item.categoryName}}</view>
								<view class="order-status">{{ item.order | formatOrderStatus }}</view>
							</view>
							<view class="order-item_bd" @click="toOrderDetail(item.order.orderNo)">
								<image class="activity-img" :src="item.coverImg" mode="aspectFill"></image>
								<view class="activity-box_rt">
									<view class="activity-name">{{item.activityName}}</view>
									<view class="activity-info">{{ item.timeStart | formatDate }} -
										{{ item.timeEnd | formatDate }}
									</view>
									<view class="activity-info">{{ item.address }}</view>
									<view class="order-price">{{ item.order.payPrice }}</view>
								</view>
							</view>
							<view class="order-item_ft" v-if="item.order.orderStatus!=10">
								<view class="order-btn" @click="cancelOrder(item)" v-if="item.order.orderStatus == 20">
									取消报名</view>
								<view class="order-btn primary" @click="payOrder(item.order.orderNo)"
									v-if="item.order.orderStatus == 20 && item.order.payStatus == 10">去支付</view>
								<view class="order-btn primary" @click="toOrderDetail(item.order.orderNo)"
									v-if="item.order.checkStatus==0||item.order.checkStatus==2">查看电子票</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderList,
		payOrder,
		queryOrder,
		cancelOrder
	} from '@/api/order.js'
	import {
		dateFormat,
		wxPayment
	} from '@/utils/util.js';
	import {
		formatOrderStatus
	} from '@/libs/order.js';

	// 获取多少条订单记录
	const pageSize = 10
	// 顶部导航配置
	const topTabs = [{
		name: '全部',
		nav: '',
	}, {
		name: '待支付',
		nav: 1,
	}, {
		name: '待审核',
		nav: 4,
	}, {
		name: '待参加',
		nav: 2,
	}, {
		name: '已完成',
		nav: 3,
	}]
	export default {
		components: {

		},
		data() {
			return {
				// 页面传参
				options: {},
				// 顶部导航配置
				topTaps: topTabs,
				// 当前选中的顶部导航项值
				activeNav: '',
				// 我参与的活动
				orderList: [],
				// 页码
				pageNo: 1,
				// 列表滚动高度
				listWrapperH: 0,
				// 是否没有更多了
				isNoMore: false,
			}
		},
		onReady() {
			let that = this
			// 重置列表滚动高度
			let selector = uni.createSelectorQuery().in(this);
			selector.select(".topbar-wrapper").boundingClientRect(function(data) {
				that.listWrapperH = (uni.getSystemInfoSync().windowHeight - data.height) + 'px'
			}).exec()
		},
		onLoad(options) {
			let that = this
			that.options = options
		},
		onShow() {
			this._getOrderList(true)
		},
		methods: {
			// 获取订单列表
			_getOrderList(refresh) {
				let that = this
				if (refresh) {
					that.pageNo = 1
					that.orderList = []
					that.isNoMore = false
				} else if (that.isNoMore) {
					that.$util.showToast('没有更多了')
					return
				}
				uni.showLoading()
				getOrderList({
					"pageSize": pageSize,
					"pageNum": that.pageNo,
					"nav": that.activeNav
				}).then(res => {
					that.orderList = that.orderList.concat(res.rows)
					if (res.rows.length == pageSize) {
						that.pageNo++
					} else {
						that.isNoMore = true
					}

				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 加载更多
			handleLoadMore() {
				this._getOrderList()
			},

			// 切换顶部导航
			handleChangeNav(nav) {
				this.activeNav = nav
				this._getOrderList(true)
			},

			// 查看活动订单详情
			toOrderDetail(orderNo) {
				this.$util.navTo(`pages/order/detail?orderNo=${orderNo}`)
			},

			// 取消订单
			cancelOrder(data) {
				let that = this
				uni.showModal({
					title: '取消订单',
					content: `确认取消活动「${data.activityName}」报名吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading()
							cancelOrder({
								orderNo: data.order.orderNo
							}).then(res => {
								that.$util.showSuccess('取消成功')
								setTimeout(() => {
									that._getOrderList(true)
								}, 1000)
							}).finally(res => {
								uni.hideLoading()
							})
						}
					}
				})
			},

			// 支付订单
			payOrder(orderNo) {
				const that = this
				uni.showLoading()
				payOrder({
					orderNo: orderNo
				}).then(res => {
					if (res.data.needPay) {
						// 发起微信支付
						wxPayment(res.data.result).finally(res => {
							that._queryOrder(orderNo)
						})
					} else {
						that._queryOrder(orderNo)
					}
				})
			},

			// 支付查询
			_queryOrder(orderNo) {
				uni.showLoading()
				let that = this
				queryOrder({
						"orderNo": orderNo
					}).then(res => {
						if (res.data.isPay) {
							that.$util.showSuccess('报名成功')
							setTimeout(() => {
								that._getOrderList(true)
							}, 1000)
						} else {
							that.$util.showError('订单未支付')
						}
					})
					.catch(err => {
						console.log(err)
					})
					.finally(res => {
						uni.hideLoading()
					})
			},
		},
		filters: {
			formatDate(date) {
				return dateFormat('YYYY/mm/dd', new Date(date))
			},
			formatOrderStatus(order) {
				return formatOrderStatus(order)
			},
		},
	}
</script>
<style lang="scss" scoped>
	.topbar-wrapper {
		.topbar-box {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			background-color: #F7F5F0;
			z-index: 999;
		}

		.topbar-item {
			flex: 1;
			color: $uni-text-color;
			opacity: .4;
			font-size: 32rpx;
			text-align: center;

			&.active {
				opacity: 1;
				font-weight: bold;
			}
		}

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 96rpx;
		}
	}

	.order-wrapper {
		.order-list {
			.order-item {
				background-color: #fff;
				margin-top: 24rpx;

				&_hd {
					display: flex;
					align-items: center;
					padding: 32rpx;

					.activity-category {
						flex: 1;
						font-size: 28rpx;
						color: $uni-text-color-grey;
					}

					.order-status {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				&_bd {
					display: flex;
					padding: 32rpx;
					position: relative;

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 32rpx;
						right: 32rpx;
						border-top: 1rpx solid #ddd;
					}

					.activity-img {
						display: block;
						width: 320rpx;
						height: 180rpx;
						border-radius: 24rpx;
						flex-shrink: 0;
					}

					.activity-box_rt {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 24rpx;
						overflow: hidden;

						.activity-name {
							font-size: 32rpx;
							line-height: 40rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 16rpx;
						}

						.activity-info {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							&+.activity-info {
								margin-top: 8rpx;
							}
						}

						.order-price {
							font-size: 32rpx;
							font-weight: bold;
							text-align: right;
							margin-top: 8rpx;

							&::before {
								content: '¥';
								font-size: 24rpx;
								font-weight: normal;
								margin-right: 4rpx;
							}
						}
					}
				}

				&_ft {
					display: flex;
					justify-content: flex-end;
					padding: 24rpx 32rpx;
					position: relative;

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 32rpx;
						right: 32rpx;
						border-top: 1rpx solid #ddd;
					}

					.order-btn {
						padding: 0 32rpx;
						font-size: 28rpx;
						line-height: 64rpx;
						border-radius: 32rpx;
						border: 1rpx solid #ddd;
						margin-left: 24rpx;

						&.primary {
							background-color: #1A1311;
							color: #fff;
							border-color: #1A1311;
						}
					}
				}
			}
		}
	}
</style>
